<template>
  <h1>1.组件的基本写法</h1>
  <p>{{ person }}</p>
  <button @click="changePerson">修改person的属性</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
/*
  wacth监视一个对象类型响应数据(ref)
    - wacth如果监听的直接是ref对象，则需要书写深度监听(deep)
    - wacth如果监听的是ref对象的value，则默认监听的是这个对象内部属性的变化(默认进行深度监听)
    - wacth如果监听的是ref对象value中的某个属性,且这个属性值是一个对象的时候，监听的它内部属性的变化（默认进行深度监听）
    - wacth如果监视ref对象的value中的某个基本类型属性(wacth的第一个参数应该写为一个函数,返回被侦听的数据),一旦这个基本数据发生改变就能被侦听
    - wacth如果监听ref对象value中的某个对象类型(但是写成函数的形式),则可以监听当前属性的改变,但是如果要监听内部属性的改变,则需要深度监听

  ref中的value属性其实就是reactive创建的代理对象,规则和上边类似

  watch如果需要监视多个属性,则可以把第一个参数书写为数组




*/
//count逻辑
let person = ref({
  name: "老王",
  age: 18,
  score: {
    math: {
      one: 100,
      two: 200,
    },
    en: 90,
  },
});
const changePerson = () => {
  // person.value.score.math.one = 101;
  // person.value.age = 19;
  person.value.name = "lily";
  /* person.value.score = {
    math: {
      one: 200,
      two: 300,
    },
    en: 90,
  }; */
};
/* //1.监视ref对象的value属性
watch(person.value, (newVal, oldVal) => {
  console.log("count的监听", newVal, oldVal);
});
 */
//2.监视ref对象
/* watch(
  person,
  (newVal, oldVal) => {
    console.log("count的监听", newVal, oldVal);
  },
  { deep: true }
); */

//3.监视ref对象的value中的某个属性 且值是一个对象
/* watch(person.value.score, (newVal, oldVal) => {
  console.log(newVal, oldVal);
}); */

//4. 监视ref对象的value中的某个属性， 值是一个基本类型(wacth的第一个参数是一个函数,返回被侦听的数据)
/* watch(
  () => person.value.age,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  }
); */

//5.wacth如果监听ref对象value中的某个对象类型(但是写成函数的形式),
/* watch(
  () => person.value.score,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  { deep: true }
); */

/* //6.wacth一次性监视多个属性
watch(
  [() => person.value.age, () => person.value.name, person.value.score],
  () => {
    console.log("watch");
  }
); */

//6.wacth监视多个属性
watch(
  () => person.value.name,
  () => {
    console.log("watch name");
  }
);
watch(
  () => person.value.age,
  () => {
    console.log("watch age");
  }
);
</script>

<style scoped></style>
